﻿@using Store.Models.Database;
@{
    var good = ViewData["Good"] as Good;
}
<!-- InstanceBeginEditable name="MainBody" -->
<div class="goods-detail" onload="init()">
    <div class="xgs-row" style="background-color: white;padding: 30px 0;">
        @if (good == null)
        {
            <div>商品不存在</div>
        }
        else
        {
            <div class="detail-panel" style="width: 100%;">
                <div class="xgs-col3">
                    <img id="pic" src="@good.Cover" height="180" align="center" style="margin: auto;display: block;" />
                </div>
                <div class="xgs-col9">
                    <h3 id="goods-title" class="goods-title">@good.Name</h3>
                    <ul id="attr">
                        <li>
                            <span style="float: left;">
                                价格：
                            </span>
                            <h3 id="price" style="color: red;">@good.Price</h3>
                        </li>
                    </ul>
                    <br />
                    <div class="btn-group" style="display: block; padding-left: 50px;">
                        <!-- <button class="orderBtn" type="button">立即购买</button> -->
                        <button class="orderBtn" type="button">加入购物车</button>
                    </div>
                </div>
            </div>
        }

    </div>
    <!-- 商品详情 -->
    <div class="detail-body">
        <div class="xgs-row" style="padding: 0;background-color: white;margin-top: 20px;">
            <ul class="household-navtab" style="display: inline-block;">
                <li>
                    <a style="background-color: #69c0ff;color: white;" href="javascript:void(0);"
                       onclick="jumpTab('content',this)">商品详情</a>
                </li>
                <!-- <li><a href="javascript:void(0);" onclick="jumpTab('guige',this)">参数规格</a></li> -->
            </ul>
        </div>
        <div class="tab-item" style="padding: 20px 0;background-color: white;">
            <!-- 商品详情 -->
            <div id="content" class="content">

            </div>
            <!-- /商品详情 -->
        </div>

    </div>
    <!-- /商品详情 -->
</div>
<!-- InstanceEndEditable -->
@section script
{
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //在页面加载完毕后
        $(function () {
            //给点击按钮绑定事件
            $(".orderBtn").on("click",
                function () {
                    //选择需要加入购物车的商品（商品Id）
                    var goodId = @good.Id;

                    //传送给后端
                    //调用Post请求
                    //三个参数  url请求链接                 参数                                   请求成功后的事件
                    $.post('/home/AddCar', { goodId: goodId}, function (data, success) {
                        alert(data);
                        console.log('服务器返回结果：' + data);
                    });

                });
        })
    </script>
}